<template>
  <div class="productDetail">
    <div class="container">
      <!--轮播图信息-->
      <div class="left-content">
        <swiper
            :effect="'fade'"
            :slides-per-view="1"
            :loop="true"
            :loopedSlides="20"
            :space-between="10"
            :modules="modules"
            :controller="{ control: secondSwiper }"
            @swiper="setFirstSwiper"
        >
          <swiper-slide v-for="(item,index) in swiperDataList" :key="index">
            <img style="width:100%;height: 400px" :src="item.imgsrc" alt="图片走丢了">
          </swiper-slide>
        </swiper>

        <swiper
            style="margin-top: 20px;border-radius: 10px"
            :space-between="10"
            :slides-per-view="3"
            :loop="true"
            :navigation="navigation"
            :loopedSlides="20"
            :freeMode="true"
            :watchSlidesVisibility="true"
            :centeredSlides="true"
            :modules="modules"
            :controller="{ control: firstSwiper  }"
            @swiper="setSecondSwiper"
        >
          <swiper-slide v-for="(item,index) in swiperDataList" :key="index">
            <img style="width:100%;height: 100px" :src="item.imgsrc" alt="图片走丢了">
          </swiper-slide>
        </swiper>
      </div>
      <!--商品信息-->
      <div class="product-info">
        <!--标题-->
        <div>
          <p class="title">春日暖阳</p>
        </div>
        <!--价格-->
        <div class="price">
          <span class="price-label" style="vertical-align:bottom;">售价</span>
          <p>￥9999</p>
          <span class="original-price">市场价<span class="s-price">￥300</span></span>
          <span class="sold"><em>已售50</em>件</span>
        </div>
        <!--材料及包装-->
        <div class="huayu">
          <div class="huayu-item">
            <span class="huayu-label">材料</span>
            <p class="huayu-content">小雏菊 向日葵</p>
          </div>
          <div class="huayu-item">
            <span class="huayu-label">花语</span>
            <p class="huayu-content">暖暖的很贴心</p>
          </div>
          <div class="huayu-item">
            <span class="huayu-label">包装</span>
            <p class="huayu-content">盒装</p>
          </div>
        </div>
        <!--配送说明及选择-->
        <div class="delivery">
          <div class="delivery-item delivery-range" style="text-align: left">
            <span class="delivery-label">配送说明</span>
            <div class="delivery-content delivery-range-detail" style="display:inline-block;cursor: default;"><p>顺丰陆运深圳发货, 全国可达, 包邮!</p><span class="icon icon-arrow" style="display: none;"></span></div>
          </div>
          <div class="delivery-item sku-product" style="text-align: left;padding-left: 12px">
            <span>配送至：</span> <el-cascader v-model="value" :options="options" @change="handleChange" />
          </div>
        </div>
        <!--几个按钮-->
        <div class="btn-group" style="text-align: left">
          <a class="addcart"> <el-icon><ShoppingCart /></el-icon>加入购物车</a>
          <a class="buy" @click="addCart">立即购买</a>
          <a><p><span class="el-icon-star-off"></span>加入收藏</p></a>
        </div>
      </div>
      <div style="clear: both"></div>
      <!--商品详情和评价-->
      <div class="product-bottom">
        <div class="detail-evaltion">
          <el-tabs v-model="activeName" stretch style="border: 1px solid #ececec;" type="border-card" class="demo-tabs">
            <el-tab-pane label="商品详情" name="first">
              <img src="http://lixinghe.meimeng.eu.org/flower/image/%E9%95%BF%E5%9B%BE%E8%AF%A6%E6%83%85.png" alt="图片走丢了">
            </el-tab-pane>
            <el-tab-pane label="商品评论" name="second">
              <!--嵌套tab-->
              <el-tabs v-model="activecName" stretch type="card" class="demo-tabs">
                <el-tab-pane label="全部评论(1)" name="1">
                  <commentList></commentList>
                </el-tab-pane>
                <el-tab-pane label="好评" name="2">
                  <commentList v-if="false"></commentList>
                  <el-empty image="	http://lixinghe.meimeng.eu.org/flower/image/empty2.jpeg" image-size="400" description="暂时没有评论~" >
                  </el-empty>
                </el-tab-pane>
                <el-tab-pane label="中评" name="3">
                  <commentList v-if="false"></commentList>
                  <el-empty image="	http://lixinghe.meimeng.eu.org/flower/image/empty2.jpeg" image-size="400" description="暂时没有评论~" >
                  </el-empty>
                </el-tab-pane>
                <el-tab-pane label="差评(1)" name="4">
                  <commentList></commentList>
                </el-tab-pane>
              </el-tabs>

            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="guessLike">
          <GuessLike></GuessLike>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
//swiper相关插件及其样式
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Controller } from 'swiper';
import 'swiper/css';
import "swiper/css/effect-fade";
import 'swiper/css/navigation';
import { EffectFade,Navigation } from "swiper";
import {reactive, ref, onMounted, toRefs} from "vue";
import { ElMessage } from 'element-plus'
import GuessLike from '@/components/commons/GuessLike'
import commentList from "@/components/commons/commentList";
export default {
  name: "index",
  setup(){

    // swiper
    const firstSwiper = ref(null);
    const secondSwiper = ref(null);
    const setFirstSwiper = (swiper) => {
      firstSwiper.value = swiper;
    };
    const setSecondSwiper = (swiper) => {
      secondSwiper.value = swiper;
    };
    let swiperDataList = reactive([
     {
       title:'小熊的话~',
       price:'99',
       primeCost:'999',
       imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/%E6%9C%89%E4%BD%A0%E7%9C%9F%E5%A5%BD-1.jpg'
     },
     {
       title:'小兔送花~',
       price:'99',
       primeCost:'999',
       imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/%E6%9C%89%E4%BD%A0%E7%9C%9F%E5%A5%BD-2.jpg'
     },
     {
       title:'小熊的话~',
       price:'99',
       primeCost:'999',
       imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/favction.jpg'
     },
     {
       title:'小兔送花~',
       price:'99',
       primeCost:'999',
       imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/%E6%9C%89%E4%BD%A0%E7%9C%9F%E5%A5%BD-3.jpg'
     },
     {
       title:'小熊的话~',
       price:'99',
       primeCost:'999',
       imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/%E6%9C%89%E4%BD%A0%E7%9C%9F%E5%A5%BD-4.jpg'
     }
   ])
    let navigation = reactive({
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },)

    //element tabs
    const activeName = ref('first')
    const activecName = ref('1')

    //钩子函数 进商品详情 水平和垂直都为0
    onMounted(() => {
      console.log('我被触发了');
      window.scrollTo(0, 0)
    })

    //级联选择器
    const value = ref('')
    const options = [
      {
        value: 'guide',
        label: 'Guide',
        children: [
          {
            value: 'disciplines',
            label: 'Disciplines',
            children: [
              {
                value: 'consistency',
                label: 'Consistency',
              },
              {
                value: 'feedback',
                label: 'Feedback',
              },
              {
                value: 'efficiency',
                label: 'Efficiency',
              },
              {
                value: 'controllability',
                label: 'Controllability',
              },
            ],
          },
          {
            value: 'navigation',
            label: 'Navigation',
            children: [
              {
                value: 'side nav',
                label: 'Side Navigation',
              },
              {
                value: 'top nav',
                label: 'Top Navigation',
              },
            ],
          },
        ],
      },
      {
        value: 'component',
        label: 'Component',
        children: [
          {
            value: 'basic',
            label: 'Basic',
            children: [
              {
                value: 'layout',
                label: 'Layout',
              },
              {
                value: 'color',
                label: 'Color',
              },
              {
                value: 'typography',
                label: 'Typography',
              },
              {
                value: 'icon',
                label: 'Icon',
              },
              {
                value: 'button',
                label: 'Button',
              },
            ],
          },
          {
            value: 'form',
            label: 'Form',
            children: [
              {
                value: 'radio',
                label: 'Radio',
              },
              {
                value: 'checkbox',
                label: 'Checkbox',
              },
              {
                value: 'input',
                label: 'Input',
              },
              {
                value: 'input-number',
                label: 'InputNumber',
              },
              {
                value: 'select',
                label: 'Select',
              },
              {
                value: 'cascader',
                label: 'Cascader',
              },
              {
                value: 'switch',
                label: 'Switch',
              },
              {
                value: 'slider',
                label: 'Slider',
              },
              {
                value: 'time-picker',
                label: 'TimePicker',
              },
              {
                value: 'date-picker',
                label: 'DatePicker',
              },
              {
                value: 'datetime-picker',
                label: 'DateTimePicker',
              },
              {
                value: 'upload',
                label: 'Upload',
              },
              {
                value: 'rate',
                label: 'Rate',
              },
              {
                value: 'form',
                label: 'Form',
              },
            ],
          },
          {
            value: 'data',
            label: 'Data',
            children: [
              {
                value: 'table',
                label: 'Table',
              },
              {
                value: 'tag',
                label: 'Tag',
              },
              {
                value: 'progress',
                label: 'Progress',
              },
              {
                value: 'tree',
                label: 'Tree',
              },
              {
                value: 'pagination',
                label: 'Pagination',
              },
              {
                value: 'badge',
                label: 'Badge',
              },
            ],
          },
          {
            value: 'notice',
            label: 'Notice',
            children: [
              {
                value: 'alert',
                label: 'Alert',
              },
              {
                value: 'loading',
                label: 'Loading',
              },
              {
                value: 'message',
                label: 'Message',
              },
              {
                value: 'message-box',
                label: 'MessageBox',
              },
              {
                value: 'notification',
                label: 'Notification',
              },
            ],
          },
          {
            value: 'navigation',
            label: 'Navigation',
            children: [
              {
                value: 'menu',
                label: 'Menu',
              },
              {
                value: 'tabs',
                label: 'Tabs',
              },
              {
                value: 'breadcrumb',
                label: 'Breadcrumb',
              },
              {
                value: 'dropdown',
                label: 'Dropdown',
              },
              {
                value: 'steps',
                label: 'Steps',
              },
            ],
          },
          {
            value: 'others',
            label: 'Others',
            children: [
              {
                value: 'dialog',
                label: 'Dialog',
              },
              {
                value: 'tooltip',
                label: 'Tooltip',
              },
              {
                value: 'popover',
                label: 'Popover',
              },
              {
                value: 'card',
                label: 'Card',
              },
              {
                value: 'carousel',
                label: 'Carousel',
              },
              {
                value: 'collapse',
                label: 'Collapse',
              },
            ],
          },
        ],
      },
      {
        value: 'resource',
        label: 'Resource',
        children: [
          {
            value: 'axure',
            label: 'Axure Components',
          },
          {
            value: 'sketch',
            label: 'Sketch Templates',
          },
          {
            value: 'docs',
            label: 'Design Documentation',
          },
        ],
      },
    ]
    function handleChange(item){
      console.log('变化的数据---',item);
    }

    let cart = reactive({

      //购物车相关
      addCart(){
        ElMessage.success('正在拉起网络........')
      }
    })



    return {
      value,
      firstSwiper,
      secondSwiper,
      setFirstSwiper,
      setSecondSwiper,
      swiperDataList,
      Controller,
      activeName,
      options,
      navigation,
      activecName,
      handleChange,
      ...toRefs(cart),
      modules: [Controller,Navigation,EffectFade],
    }
  },
  components: {
    Swiper,
    SwiperSlide,
    GuessLike,
    commentList
  }
}
</script>

<style scoped lang="scss">
  .productDetail {
    .container {
      width: 1250px;
      min-height: 500px;
      margin: 0 auto;
      padding: 0 0 200px 0;
      .left-content {
        height: 100%;
        width: 400px;
        padding: 25px 0 0 40px;
        float: left;
      }
    }
  }
  html,
  body {
    position: relative;
    height: 100%;
  }
  body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
  }
  .swiper {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    background-position: center;
    background-size: cover;
    img {
      display: block;
      width: 100%;
    }
  }
  .product-info {
    display: inline-block;
    float: right;
    width: 660px;
    padding:25px 70px 0 0;
    vertical-align: top;
    .price {
      position: relative;
      margin-top: 20px;
      display: flex;
      align-items: center;
      padding: 12px 0;
      background: #F3F5F7;
      border-radius: 8px 8px 0px 0px;
    }
    .price-label {
      display: inline-block;
      width: 80px;
      padding-left: 12px;
      font-size: 13px;
      line-height: 18px;
      color: #71797F;
      vertical-align: middle;
    }
    .huayu-label {
      display: inline-block;
      width: 80px;
      padding-left: 12px;
      font-size: 18px;
      line-height: 18px;
      color: #71797F;
      vertical-align: top;
    }
    .huayu {
      border-bottom: 1px solid #e7ebef;
      padding: 20px 0;
      border-radius: 0 0 8px 8px;
      text-align: left;
      .huayu-item{
        margin-top: 12px;
        display: flex;
        align-items: center;
        padding: 20px 0;
      }
    }
    .huayu-content {
      display: inline-block;
      width: 520px;
      font-size: 16px;
      line-height: 18px;
      color: #232628;
      vertical-align: top;
      text-align: justify;
      padding-right: 36px;
    }
    .delivery-item {
      margin: 10px 0;
      .sku-product .delivery-label {
        line-height: 44px;
      }
    }
    .delivery-label {
      width: 80px;
      padding-left: 12px;
      color: #71797F;
    }
    .delivery {
      .sku-list {
        display: inline-block;
        width: 560px;
        vertical-align: top;
      }
      .sku-box {
        position: relative;
        display: inline-block;
        height: 44px;
        line-height: 44px;
        margin-bottom: 10px;
        margin-right: 20px;
        cursor: pointer;
        border: 1px solid #99A9BF;
        img {
          width: 40px;
          vertical-align: top;
        }
      }
      .sku-name {
        padding: 0 16px;
        font-size: 14px;
        color: #232628;
        vertical-align: top;
      }
      .sku-box span.icon-chosen {
        display: none;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 22px;
        height: 22px;
        background-position: 0 -374px;
      }
      .sku-border-top {
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        position: absolute;
        background: #E9ECF0;
      }
      .sku-border-right {
        right: 0;
        top: 0;
        bottom: 0;
        width: 1px;
        position: absolute;
        background: #E9ECF0;
      }
      .sku-border-bottom {
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        position: absolute;
        background: #E9ECF0;
      }
      .sku-border-left {
        left: 0;
        top: 0;
        bottom: 0;
        width: 1px;
        position: absolute;
        background: #E9ECF0;
      }
    }
    .btn-group {
      display: flex;
      align-items: center;
    }
  }



  .title {
    font-size: 22px;
    line-height: 22px;
    color: #232628;
    font-weight: bold;
    text-align: left;
  }
  .price p:nth-of-type(1) {
    color: orangered;
    display: inline-block;
    font-size: 30px;
    line-height: 30px;
    font-weight: bolder;
  }
  .original-price {
    display: inline-block;
    margin-left: 16px;
    color: #71797F;
    font-size: 13px;
    line-height: 18px;
  }
  .s-price {
    vertical-align: middle;
    text-decoration: line-through;
    margin-left: 2px;
    color: #71797F;
    font-size: 13px;
    line-height: 18px;
  }
  .sold {
    float: right;
    margin-left: 2px;
    color: #71797F;
    font-size: 13px;
    line-height: 40px;
  }
  em {
    color: orangered;
  }
  .el-input {
    width: 200px;
  }

  .addcart {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 208px;
    height: 56px;
    border-radius: 50px;
    text-align: center;
    color: #FF734C;
    line-height: 54px;
    border: 1px solid rgba(255, 115, 76, 0.2);
    background: #FFF0EC;
  }
  .buy{
    cursor: pointer;
    margin-left: 40px;
    display: inline-block;
    width: 208px;
    height: 56px;
    border-radius: 50px;
    text-align: center;
    color: #fff;
    line-height: 56px;
    background: #FF734C;
  }
  .btn-group p {
    display: inline-block;
    margin-left: 20px;
  }
  .btn-group p:hover {
    color: orangered;
  }
  .wrap {
    width: 1200px;
    margin: 60px auto 0;
    .detail-hd {
      width: 980px;
      margin: 0 auto;
      height: 50px;
      background: #F3F5F7;
      margin-bottom: 20px;
      ul {
        li {
          display: inline-block;
          padding: 0 50px;
          font-size: 16px;
          line-height: 50px;
          height: 50px;
          color: #232628;
          position: relative;
          vertical-align: top;
          cursor: pointer;
        }
      }
    }

    .detail-product-info {
      width: 876px;
      padding: 20px 52px;
      background: #F7F9FA;
      border-radius: 0px 0px 8px 8px;
      margin: 0 auto;
    }
    .detail-product-info-l {
      position: relative;
      display: inline-block;
      width: 107px;
      vertical-align: middle;
    }
    .detail-product-info-r {
      display: inline-block;
      width: 700px;
      text-align: left;
      padding-left: 53px;
      border-left: 1px solid #E9ECF0;
      vertical-align: middle;
    }
    .detail-product-info-label {
      color: #71797F;
      width: 50px;
    }
    .detail-product-content {
      padding: 40px 115px 95px;
      text-align: center;
    }
    .detail-item-title {
      padding: 15px 30px;
      background: #F3F5F7;
      width: 920px;
      text-align: left;
      margin: 0 auto;
      font-size: 16px;
      line-height: 20px;
      color: #232628;
      font-weight: bold;
      border-radius: 8px 8px 0px 0px;
      overflow: hidden;
    }
    .detail-comment-item {
      width: 980px;
      margin: 0 auto;
      padding: 20px 0;
      border: 1px solid #9A9FA4;
      border-top: 0;
    }
    .detail-comment-item-user {
      display: inline-block;
      width: 190px;
      padding-left: 20px;
      text-align: center;
      vertical-align: top;
    }
    .detail-comment-item-main {
      display: inline-block;
    }
    .detail-comment-item-content {
      width: 740px;
      margin-top: 6px;
    }
  }
  .choice::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 2px;
    bottom: 0px;
    left: 22px;
    background: #FF734C;
  }
  .choice {
    color: orange;
  }
  .allcomments {
    padding: 15px 30px;
    background: #dfe5e7;
    width: 920px;
    text-align: left;
    margin: 0 auto;
    font-size: 16px;
    line-height: 20px;
    color: orangered;
    overflow: hidden;
  }
  .star-item {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 4px;
  }
  .product-bottom {
    margin-top: 60px;
    display: flex;
  }
  .detail-evaltion {
    flex: 2.5;
  }
  .guessLike {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .box {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid sandybrown;
    .user {
      padding: 0 0 0 15px;
      text-align: center;
    }
    p {
      padding: 20px 0;
    }
  }
  .box-content {
    margin-left: 50px;
    display: flex;
    flex-direction: column;
  }
  * {
    margin: 0;
    padding: 0;
  }
  .pagin {
    display: flex;
    padding: 20px;
    justify-content: center;
  }
</style>
